<template>
<div class="boxx">
    <div class="hisTitle">
      <h2>商城</h2>
    </div>
      <div class="imgWord">
        <!-- <img style="width:700px;margin-top:10px" src="../../image/jifen-background.png" alt=""> -->
        当前积分
        <br>
        <h1>{{ss.integration}}</h1>
      </div>
    <div class="itemBox" style="width:100%;height:595px;overflow:auto">
      <ul style="padding:0">
        <li v-for="(item,index) in list" :key=index>
          <div style="width:150px;height:250px">
            <img style="width:140px;height:140px;margin:5px" :src="item.image" alt="">
            <p>{{item.name}}</p>
            <a>价格{{item.price}}积分</a>
            <el-button round style="width:40px;height:20px;padding:0px" @click="putChange(index,item)"><a>兑换</a></el-button>
          </div>
        </li>
      </ul>
    </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
    name:'userstore',
    data() {
      return {
        form: {
          name: '',
          gender: '',
          age: '',
          school: '',
        },
        list:[]
      }
    },
    created(){
      console.log(this.ss);
      this.getList();
      this.onLogin()
    },
    computed:{
    ...mapState({
        'ss':state=>state.userinfo
    }),
    },
    methods: 
    {
    // toLogin(){
    //   this.$router.push('login')
    // },
    async getList(){
      const data = await this.aGet ('/shop/shopList');
      this.list=data
      console.log(this.list);
    },
    async putChange(index,row){
      const data = await this.aPut ('/shop/exchange',{ 
      id: row._id,
    });
    this.onLogin();
    console.log(index,row._id);
    console.log(data);
  },
    async onLogin(){
        const data = await this.aPost ('/user/login',{
        username: this.ss.username,
        password: this.ss.password
      });
      console.log(this.ss.password);
      console.log(data);
      // console.log(data.user);
      // localStorage.setItem('temp',JSON.stringify(data.user))
      this.$store.dispatch('action1',data.user)
      }
    
    // toStore(){
    //     ulli.style.backgroundColor='pink';
    // },
    // toUser(){
    //     ulli.style.backgroundColor='pink';
    // }
  }
  }
</script>

<style scoped>
    .boxx{
      width: 100%;
      height: 100%;
      /* background-color: green; */
      color: black;
      /* text-align: center; */
      /* position: relative; */
    }
    .hisTitle h2{
      float:left;
      margin-left:50px
      /* width: 100%;
      height: 75px; */
      /* box-shadow: 3px 3px 3px #333333; */
      /* text-align: left; */
    }
    .hisTitle{
        width: 100%;
        height: 74px;
        box-shadow: 0px 2px 3px #333333;
    }
    .imgWord{
      /* position: absolute;
      left: 10px; */
      color: white;
      width: 700px;
      height: 100px;
      margin: 10px auto;
      background-image:url('../../image/jifen-background.png');
      background-size: cover;
    }
    .itemBox p{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .itemBox ul li{
      padding: 0;
      margin: 10px;
      list-style:none;
      display:inline-block;
      box-shadow: 1px 1px 2px #111111;
      border: #1111117e 1px solid;
      border-radius:10px;
    }
    
</style>